<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>教师列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th,
        .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
  
    </script>
</head>

<body>
    <div class="container-fluid my-container">
        <!-- 页头 -->
        <ol class="breadcrumb" style="margin-top:5px;">
            <li><a href="#">主页</a></li>
            <li><a href="#">教师管理</a></li>
            <li class="active">教师列表</li>
        </ol>
        <!-- 检索框 -->
        <form class="form-inline">
            <div class="form-group">
                <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
            </div>
            <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
            <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
        </form>
        <!-- 内容 -->
        <div class="panel panel-default" style="margin-top: 10px;">
            <div class="panel-heading">
                <h3 class="panel-title">操作面板</h3>
            </div>
            <div class="panel-body">
                <!-- 表格 -->
                <table class="table table-hover table-condensed table-bordered table-striped">
                    <thead>
                        <!-- 标题行 -->
                        <tr>
                            <th>编号</th>
                            <th width="120">工号</th>
                            <th>姓名</th>
                            <th>头像</th>
                            <th>性别</th>
                            <th>手机</th>
                            <th>职称</th>
                            <th width="180">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 内容行 -->
                    </tbody>
                </table>
                <!-- 分页组件 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>  

        <!-- 尾部 -->
        <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
    </div>
    <!-- 模态框：实现教师信息的展示与修改-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <!-- 编辑界面的标题-->
                    <h4 class="modal-title" id="exampleModalLabel"
                        style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑教师信息</h4>
                </div>
                <div class="modal-body">
                    <!-- 表单（输入组件），从添加复制过来，改一改 -->
 <form id="myForm" action="/SelectCourse2/teacher/add" method="post">
                <div class="form-group">
                    <label for="nickname">姓<span style="color:transparent;user-select: none;">隐藏</span>名：</label>
                    <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label for="nickname">性<span style="color:transparent;user-select: none;">隐藏</span>别：</label>
                    <div class="radio">
                        <label>
                            <input type="radio" name="gender" id="optionsRadios1" value="男">
                            男
                        </label>
                        &nbsp;&nbsp;
                        <label>
                            <input type="radio" name="gender" id="optionsRadios2" value="女">
                            女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                    <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
                </div>
				<div class="form-group">
				    <label for="phone">身份证号：</label>
				    <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入身份证号">
				</div>
                <div class="form-group">
                    <label for="rank">房<span style="color:transparent;user-select: none;">隐藏</span>型：</label>
                    <select class="form-control" id="rank">
                        <option class="disabled" readonly>请选择房型</option>
                        <option value="大床房">大床房</option>
                        <option value="标准房">标准房</option>
                        <option value="总统套房">总统套房</option>
                        <option value="豪华套房">豪华套房</option>
                    </select>
                </div>
				<div class="form-group">
				    <label for="rank">房<span style="color:transparent;user-select: none;">隐藏</span>号：</label>
				    <select class="form-control" id="rank">
				        <option class="disabled" readonly>请选择房型</option>
				        <option value="801">801</option>
				        <option value="802">802</option>
				        <option value="803">803</option>
				        <option value="804">804</option>
				    </select>
				</div>
                <button type="button" class="btn btn-success" onclick="save()">保存</button>
            </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save-btn">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框：实现教师信息的删除-->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel2"
                        style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
                </div>
                <div class="modal-body">
                    确定删除当前老师？
                    <!-- 这里需要使用隐藏域绑定一个主键编号：所谓隐藏域，就是程序中能够读到，用户却看不见-->
                    <input type="hidden" id="userId2">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="del-btn">确认</button>
                </div>
            </div>
        </div>
    </div>
</body>

</html>